import { useIntersectionObserver } from '@vueuse/core' // 导入监听视口方法
import defultImg from '@/assets/images/200.png'

export default {
  install (app) {
    app.directive('lazy-img', { // 指令的名字
      // el:当前绑定的dom元素,binding:指令绑定的表达式的后面的值
      mounted (el, binding) {
        const { stop } = useIntersectionObserver(
          // isIntersecting 元素是否进入视口区域
          el, ([{ isIntersecting }], observerElement) => {
            // 元素进入视口区域
            if (isIntersecting) {
              // 监听图片加载出错,添加默认图片
              el.onerror = () => {
                el.src = defultImg
              }
              el.src = binding.value // 给元素的src属性赋值
              stop() // 首次加载完成后停止监听
            }
          }
        )
      }
    })
  }
}
